<template>
<!--  <div style="background:#eeeeee;height: 80vh;padding: 80px">-->

<div>
  <el-row>
  <!-- 顶部导航 -->
    <div style="font-size: 15px;padding: 20px;text-align: left">
      LOGO 位置 首页 | 分类1 | 分类2
    </div>
  </el-row>
  <el-row >
    <div id="row" style="height: 2px;width: 0;margin-top: 30px;border-radius: 2px;background: #7d4dbb;overflow:hidden;">
      <!--    /*background:#eeeeee;padding: 80px;height: 40vh;transform: translate(-50%, 0);*/-->
      <div style="height: 40vh;overflow: hidden;position: absolute;width: 100%;z-index: 0;filter: blur(2px)">
        <video
          style="width: 100%;float: top;"
          autoplay muted loop class="vidbacking">
          <source src="static/video/coding.mp4" type="video/mp4">
        </video>
      </div>
      <el-col :span="12" style="z-index: 1;color: #7d4dbb">
        <div style="height: 50%;transform: translate(0, 50%);width: fit-content;margin: 0 auto">
          <h1 style="margin: 0 auto">2021年8月20日</h1>
          <h2 style="padding-bottom:10px;border-bottom: #7d4dbb 1px solid;width: unset">愿你不忘初心，不时回到梦开始的地方。 </h2>
          <p>世界就是这样，模糊又刻薄。</p>
        </div>
      </el-col>
      <el-col :span="12">
        <div>
          <!-- 登陆窗口 -->
          <div id="demo" style="overflow: hidden;filter: opacity(0);width: 0;height: 0;position:absolute;margin-left:35%;transform: translate(-50%, 0);z-index: 10" @click="move">
            <!-- 缩小按钮 -->
            <div style="position: relative;width: 270px;text-align: right;z-index: 1">
             <a @click.prevent.stop="move(false)"  href=""><i class="fa fa-minus-square" ></i></a>
            </div>

            <!-- 图层 -->
            <div style="position: relative;top: -18px">
<!--              <img style="width: 100px" src="static/img/logei.jpeg" alt="">-->
              <p style="line-height: 80px;font-size: 12px">BE SUCCESS</p>
            </div>
          </div>

          <!-- 文字框 -->
          <div style="font-size: 14px;margin-left:40%;position: relative;bottom: -190px;z-index: 0">
            —————————————
            <br>
            扫码方块登陆 | 点击方块注册
          </div>
        </div>


<!--        <el-button @click="move" style="margin: 80px;position: absolute;top: 0">-->
<!--          Go-->
<!--        </el-button>-->
      </el-col>
    </div>

  </el-row>
  <el-row>
    <div style="margin: 0 auto;width: 400px;">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="401px" height="84px">
        <path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
              d="M63.777,19.108 C66.301,19.174 68.826,19.241 71.350,19.307 C71.350,20.302 71.350,21.297 71.350,22.293 C73.476,22.359 75.602,22.425 77.728,22.492 C77.662,24.946 77.595,27.402 77.529,29.856 C76.532,29.856 75.535,29.856 74.539,29.856 C74.539,30.121 74.539,30.387 74.539,30.652 C75.801,31.913 77.064,33.174 78.326,34.434 C78.592,34.301 78.857,34.169 79.123,34.036 C80.439,33.217 81.137,31.617 81.714,30.055 C81.714,29.989 81.714,29.922 81.714,29.856 C80.917,29.790 80.119,29.723 79.322,29.657 C79.322,27.202 79.322,24.747 79.322,22.293 C81.315,22.293 83.309,22.293 85.301,22.293 C85.301,21.231 85.301,20.169 85.301,19.108 C87.959,19.174 90.616,19.241 93.273,19.307 C93.273,20.302 93.273,21.297 93.273,22.293 C95.532,22.359 97.791,22.425 100.050,22.492 C99.983,24.946 99.917,27.402 99.850,29.856 C98.721,29.856 97.592,29.856 96.462,29.856 C96.462,29.922 96.462,29.989 96.462,30.055 C96.529,30.321 96.595,30.586 96.662,30.851 C98.123,32.045 99.585,33.240 101.046,34.434 C100.453,36.369 98.746,39.254 97.260,40.405 C96.130,39.543 95.001,38.680 93.871,37.818 C93.672,37.818 93.473,37.818 93.273,37.818 C93.273,38.879 93.273,39.941 93.273,41.002 C93.273,41.400 93.273,41.799 93.273,42.197 C94.735,42.197 96.197,42.197 97.658,42.197 C97.846,62.068 78.576,64.425 58.595,64.290 C58.656,60.468 57.440,58.853 57.000,55.731 C57.864,55.731 58.728,55.731 59.591,55.731 C62.530,56.720 67.955,56.100 70.952,55.731 C70.553,54.736 70.154,53.741 69.756,52.746 C72.147,51.950 74.539,51.153 76.931,50.357 C76.864,50.092 76.798,49.827 76.731,49.561 C74.406,49.561 72.081,49.561 69.756,49.561 C67.220,50.427 66.536,53.720 63.179,54.338 C61.452,52.481 59.724,50.623 57.997,48.765 C57.997,48.632 57.997,48.500 57.997,48.367 C60.766,46.515 64.120,44.563 65.770,41.600 C65.770,41.533 65.770,41.467 65.770,41.400 C65.106,41.334 64.441,41.268 63.777,41.201 C63.777,40.074 63.777,38.946 63.777,37.818 C63.511,37.818 63.245,37.818 62.980,37.818 C61.784,38.879 60.588,39.941 59.392,41.002 C59.060,40.936 58.728,40.870 58.396,40.803 C57.333,38.813 56.270,36.822 55.207,34.832 C56.662,33.089 59.504,32.305 60.189,29.856 C59.126,29.790 58.063,29.723 57.000,29.657 C57.000,27.202 57.000,24.747 57.000,22.293 C59.259,22.293 61.518,22.293 63.777,22.293 C63.777,21.231 63.777,20.169 63.777,19.108 ZM377.678,50.556 C377.745,47.040 377.612,43.523 377.678,40.007 C377.877,39.941 378.475,39.675 378.675,39.609 C384.122,39.609 389.570,39.609 395.017,39.609 C395.217,39.742 395.416,39.875 395.615,40.007 C395.642,42.728 395.692,51.303 395.615,53.144 C395.538,54.985 395.846,61.963 395.615,64.091 C391.288,64.143 388.481,64.281 383.096,64.317 C382.466,64.321 382.873,63.296 382.461,63.295 C381.284,63.293 380.897,63.990 378.869,64.266 C368.006,65.743 355.557,60.445 355.556,42.794 C355.555,39.820 355.394,36.927 356.153,34.633 C358.500,27.542 363.350,21.592 371.101,19.904 C378.722,18.245 387.924,20.869 392.227,28.463 C392.742,29.371 394.869,33.635 394.220,36.225 C393.943,36.608 394.200,35.946 393.822,36.225 C393.038,36.714 391.093,36.371 389.238,36.424 C386.266,36.510 383.724,36.505 381.465,36.424 C378.921,28.682 370.670,31.835 369.307,38.813 C368.172,44.623 369.720,50.281 372.895,51.950 C375.053,53.084 381.026,52.626 380.873,51.015 C380.719,49.404 381.021,50.719 381.066,50.556 C380.933,50.556 380.800,50.556 380.668,50.556 C379.738,50.490 378.608,50.623 377.678,50.556 ZM17.539,19.904 C20.461,19.970 26.385,19.336 26.308,20.103 C26.231,20.870 26.308,49.297 26.308,63.892 C23.385,63.892 20.461,63.892 17.539,63.892 C17.472,61.769 17.406,59.646 17.339,57.523 C17.273,57.523 17.206,57.523 17.140,57.523 C13.951,58.584 10.762,59.646 7.573,60.707 C6.710,57.987 5.846,55.267 4.983,52.547 C5.115,52.348 5.248,52.149 5.381,51.950 C7.397,51.611 18.799,48.153 17.339,47.770 C17.339,46.696 17.472,41.666 17.539,38.614 C13.819,38.548 10.098,38.481 6.378,38.415 C6.378,35.562 6.378,32.709 6.378,29.856 C10.098,29.856 13.819,29.856 17.539,29.856 C17.539,26.539 17.539,23.221 17.539,19.904 ZM28.301,19.904 C31.224,19.904 34.147,19.904 37.070,19.904 C37.070,24.548 36.686,33.377 37.070,33.837 C37.454,34.297 37.203,33.837 37.270,33.837 C40.227,32.652 43.691,29.199 44.843,28.662 C46.687,31.884 49.763,34.019 50.224,34.633 C50.685,35.247 50.091,35.164 50.025,35.429 C48.032,36.955 46.039,38.481 44.046,40.007 C41.721,41.334 39.395,42.661 37.070,43.988 C37.137,47.637 37.203,51.287 37.270,54.935 C37.469,55.002 37.099,54.060 37.867,55.134 C38.636,56.208 41.085,55.825 41.853,55.134 C43.236,54.674 43.707,52.417 43.847,50.556 C43.913,50.556 43.979,50.556 44.046,50.556 C46.436,51.401 50.340,52.808 52.018,54.537 C50.928,57.207 50.302,61.616 47.833,62.897 C44.635,64.556 29.670,63.915 28.500,61.504 C28.434,47.638 28.367,33.769 28.301,19.904 ZM202.093,19.904 C206.211,19.970 210.331,20.037 214.449,20.103 C214.649,20.236 214.848,20.369 215.047,20.501 C214.981,34.764 214.914,49.032 214.848,63.295 C214.715,63.494 214.582,63.693 214.449,63.892 C211.904,63.936 207.888,63.935 204.776,64.118 C202.654,64.242 201.724,64.538 201.295,63.295 C201.362,48.965 201.428,34.632 201.495,20.302 C201.694,20.169 201.893,20.037 202.093,19.904 ZM265.471,64.290 C261.684,64.290 257.698,64.091 253.911,64.091 C253.911,57.921 253.911,51.551 253.911,45.381 C253.712,45.381 253.911,44.386 253.712,44.386 C253.481,46.915 248.856,62.452 248.530,64.091 C246.422,64.212 241.043,64.187 239.362,64.091 C237.834,58.452 235.907,50.423 234.380,44.784 C234.247,44.851 234.313,46.509 234.180,46.576 C234.114,52.148 234.047,57.722 233.981,63.295 C233.848,63.494 233.715,63.693 233.582,63.892 C230.310,63.957 225.366,64.499 222.621,63.892 C222.622,63.684 222.423,62.880 222.424,62.672 C222.490,48.550 222.555,34.424 222.621,20.302 C222.820,20.236 223.019,20.169 223.219,20.103 C224.920,20.063 237.537,20.017 238.366,20.103 C240.093,26.472 241.820,33.240 243.548,39.609 C243.880,39.476 244.212,39.344 244.544,39.211 C244.884,36.661 248.831,20.772 249.925,20.103 C252.516,20.037 255.107,19.970 257.698,19.904 C260.023,19.970 262.349,20.037 264.674,20.103 C264.873,20.236 265.072,20.369 265.272,20.501 C265.272,34.963 265.471,49.828 265.471,64.290 ZM313.303,19.904 C316.825,19.841 322.689,19.837 325.062,20.103 C326.133,22.142 335.521,37.748 336.622,39.609 C336.688,33.506 336.555,26.007 336.622,19.904 C336.821,19.838 337.020,20.169 337.220,20.103 C337.866,19.831 340.169,19.978 341.405,19.904 C344.613,19.711 347.986,19.720 349.377,20.103 C349.375,20.557 349.180,21.441 349.178,21.894 C349.114,35.704 349.242,49.485 349.178,63.295 C349.045,63.494 348.513,63.693 348.381,63.892 C344.813,63.955 338.713,64.656 336.223,63.295 C334.950,60.807 326.130,45.263 325.062,44.187 C324.996,50.158 324.929,57.324 324.863,63.295 C324.730,63.494 324.597,63.693 324.464,63.892 C321.014,63.956 315.476,64.078 312.506,63.693 C312.573,49.364 312.639,34.632 312.705,20.302 C312.905,20.169 313.104,20.037 313.303,19.904 ZM117.588,20.302 C125.610,20.183 133.814,20.303 140.310,20.265 C146.631,20.228 150.832,23.365 151.470,29.657 C151.666,31.591 151.977,34.158 151.271,36.026 C150.303,37.294 149.335,38.563 148.368,39.831 C148.272,39.956 148.177,40.081 148.082,40.206 C146.880,40.943 148.003,40.977 148.477,41.322 C150.797,43.007 153.724,47.092 153.064,53.940 C152.656,58.179 150.214,59.889 147.609,62.018 C144.335,64.693 136.280,63.892 128.749,63.892 C127.867,63.892 126.635,64.151 125.713,63.998 C124.791,63.845 118.589,64.346 116.791,63.295 C116.858,49.098 116.924,34.897 116.991,20.700 C117.190,20.568 117.389,20.435 117.588,20.302 ZM159.442,20.302 C167.546,20.302 175.653,20.302 183.757,20.302 C186.439,20.302 190.543,19.807 192.526,20.700 C192.460,24.283 192.393,27.866 192.327,31.448 C185.618,31.448 178.906,31.448 172.197,31.448 C172.197,32.908 172.197,34.368 172.197,35.827 C177.777,35.894 183.359,35.960 188.939,36.026 C189.322,36.304 189.058,36.047 189.337,36.424 C190.386,38.082 190.131,45.082 189.537,47.173 C183.757,47.173 177.976,47.173 172.197,47.173 C172.197,48.831 172.197,50.490 172.197,52.149 C178.973,52.215 185.751,52.281 192.526,52.348 C192.792,52.679 193.058,53.011 193.323,53.343 C193.367,56.563 193.633,60.720 192.925,63.295 C192.792,63.361 192.659,63.428 192.526,63.494 C181.499,63.494 170.469,63.494 159.442,63.494 C159.442,49.098 159.442,34.698 159.442,20.302 ZM284.405,31.448 C284.471,32.908 284.537,34.567 284.604,36.026 C290.184,36.093 295.765,35.960 301.345,36.026 C301.545,36.159 301.744,36.292 301.943,36.424 C301.943,40.007 301.943,43.590 301.943,47.173 C296.098,47.239 290.250,47.305 284.405,47.372 C284.471,49.097 284.537,50.822 284.604,52.547 C291.379,52.613 298.157,52.679 304.933,52.746 C305.132,52.878 305.331,53.011 305.531,53.144 C305.464,56.395 305.398,59.646 305.331,62.897 C305.198,63.096 305.066,63.295 304.933,63.494 C299.090,63.920 276.031,63.900 271.848,63.494 C271.849,63.419 271.850,62.594 271.851,62.442 C271.916,48.530 271.982,34.613 272.048,20.700 C272.247,20.634 272.446,20.568 272.646,20.501 C283.341,20.501 294.039,20.501 304.733,20.501 C304.667,24.150 305.198,27.800 305.132,31.448 C298.423,31.448 291.114,31.448 284.405,31.448 ZM-0.000,-0.000 C133.400,-0.000 266.800,-0.000 400.199,-0.000 C400.133,27.733 400.066,55.466 400.000,83.199 C266.667,83.133 133.333,83.066 -0.000,83.000 C-0.000,55.333 -0.000,27.667 -0.000,-0.000 Z"/>
      </svg>

      <img id="logoImg" src="static/img/beimengLOGO4002021年8月20日.png" alt="" style="width: 400px;position: relative;top:-87px;z-index: -10">

      <p id="logoText" style="font-size: 14px;position:absolute;top: 70px;"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;——专为学生自建的网站 </p>
    </div>


    <div class="info card" style="
    text-align: left;filter: opacity(0);margin: 0 40px;
    position: absolute;border: gray solid 1px;
    border-radius: 5px;
    width: 400px;height: 100px;padding: 10px">
      <div style="padding: 10px;">
        <i class="fa fa-code"></i>
        <strong>Java</strong>
        <a href=" " @click.prevent=""> <i style="position: absolute;right: 15px;" class="click fa fa-plus-square"></i></a>

      </div>
      <!-- 左下角代码块 -->
      <div style="">
        <span style="color: orange">Arrays</span>.<span style="color: #5A87FF">asList</span>(1,2,3).<span style="color: #5A87FF">forEach</span>(<span style="color: orange">System</span>.<span style="color: aquamarine">out</span>::<span style="color: #5A87FF">println</span>); <span v-show="click">|</span>
      </div>

    </div>

  </el-row>



  <footer style="position: fixed;bottom: 0;margin: 10px;width: 100%">
    <!--版权信息-->
    <div class="info" style="width: 60%;border-radius:5px;color:white;background: #757571;position: relative;left: 30%;transform: translate(-50%, 0);display: inline-block;padding: 5px 0;font-size: 15px">
      Copyright2021 北梦.com .AllRightsReserved.
    </div>

    <div style="position: absolute;right: 0;bottom: 0;margin: 0;width: 290px">
      <div id="loading" style="width: 15px;height: 15px;background: #5A87FF;">

      </div>
      <p id="logItem" style="position: absolute;top:-20px;left: 50%;transform: translate(-50%, 0);font-size: 10px">
        loop began : {{loopTimes}} <br>
        loop complete : {{ loopTimes > 1 ? Math.round((loopTimes - 1) / 2) : 0 }}
      </p>
    </div>
  </footer>

</div>


<!--  </div>-->
</template>

<script>
import anime from 'animejs/lib/anime.es.js';
export default {
  name: "second_demo",
  data(){
    return{
      clicked:false,
      text:'',
      click:true, // 模拟光标闪动


      // times:0,// 上传进度
      loopTimes:-1,

    }
  },
  created() {


    setInterval(()=>{
      this.click = !this.click
    },800)
  },
  mounted() {

    // 打开灰色窗口
    anime({
      targets: '#row',
      delay:2500,
      // translateX: 250
      background:'#eeeeee',
      width:'100%',
      height:{
        value:'40vh',
        delay:3400, // 2500 + 900
      },
      borderRadius:'0',
      easing: 'easeInOutSine' // 避免前后摇
    });

    // 打开登陆窗口
    anime({
      targets: '#demo',
      // translateX: 250
      marginTop:{
        value:80,
        delay:3800
      },
      width:{
        value:100,
        delay:3800 //3400 + 600
      },
      height:{
        value:100,
        delay:3800 //3400 + 600
      },
      background:{
        value:'rgb(255,255,255)',
        delay:3800
      },
      boxShadow:{
        value:'10px 10px 12px 0 rgba(0, 0, 0, 0.2)',
        delay:3800
      },
      borderLeft:{
        value:'white 1px solid',
        delay:3800
      },
      borderTop:{
        value:'white 1px solid',
        delay:3800
      },
      borderRadius:{
        value:'10px',
        delay:3800
      },
      filter:{
        value:'opacity(1)',
        delay:3800
      },
      display:'inline-block',
      duration: 1400,
    });

    // 显示左侧文字
    anime({
      targets: '.info',
      delay:4500,
      filter: 'opacity(1)',
      // translateX: {
      //   value:25,
      // },
      easing: 'easeInOutSine' // 避免前后摇
    });

    this.loading()
  },
  methods:{

    out(){ // 退出当前页面的方法
      anime({
        targets: '#logoImg',
        // translateX: 250
        width:{
          value:270
        },
        duration: 700,
        // endDelay: 1000,
        // delay:2000, // 运行前掩饰
        height: {
          value:350,
          delay:250
        },
        translateY: {
          value:-70,
          delay:250
        },
        padding: '15px',
        easing: 'easeInOutSine' // 避免前后摇
      });

    },
    move(direction = true){
      if (direction){
        anime({
          targets: '#demo',
          // translateX: 250
          width:{
            value:270
          },
          duration: 700,
          // endDelay: 1000,
          // delay:2000, // 运行前掩饰
          height: {
            value:350,
            delay:250
          },
          translateY: {
            value:-70,
            delay:250
          },
          padding: '15px',
          easing: 'easeInOutSine' // 避免前后摇
        });
      }else {
        anime({
          targets: '#demo',
          // translateX: 250
          width:{
            value:100,
            delay:250
          },
          duration: 700,
          // endDelay: 1000,
          // delay:2000, // 运行前掩饰
          height: {
            value:100,
          },
          padding: '0',
          translateY: {
            value:0,
            // delay:250
          },
          easing: 'easeInOutSine' // 避免前后摇
        });
      }
    },
    loading(){

      anime({
        targets: '#loading',
        translateX: 240,
        loop: true,
        direction: 'alternate',
        easing: 'easeInOutCirc',
        // scale: 2,
        rotate: '1turn',
        borderRadius: ['0%', '50%'],
        loopBegin: (anim) => {
          this.loopTimes++;
        },
        // loopComplete:(anim) => {
        //   this.loopTimes++;
        // },
      });
    }

  }
}
</script>

<style scoped>
.click:hover{
  color: #4163c4;
}

.card{
  box-shadow: 10px 10px 12px 0 rgba(0, 0, 0, 0.2);

}


.vidbacking{
  animation: showVideo 8s linear;
  display: unset;
  filter: opacity(0.7);
}
@keyframes showVideo {
  0% {
    display: none;
    filter: opacity(0);
  }
  50% {
    display: none;
    filter: opacity(0);
  }
  100% {
    display: unset;
    filter: opacity(0.7);
  }
}

#logoText{
  animation: show 5s;
  filter: opacity(1);
}

#logoImg{

  animation: show 3s;
  filter: opacity(1);
}

@keyframes show {
  0% {
    filter: opacity(0);
  }
  100% {
    filter: opacity(1);
  }
}

svg path {
  stroke: #7d4dbb;
  stroke-width: 2px;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: dash 3s linear forwards ;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
    stroke-dasharray: 1000;
    filter: opacity(0);
  }
}
</style>
